<template>
  <div class="com-community">
    <el-form :model="form" inline>
      <el-form-item>
        <el-select
          v-model="form.community"
          clearable
          placeholder="请选择社区"
          @change="getPeriod"
          size="small"
        >
          <el-option
            v-for="item in community"
            :key="item.id"
            :label="item.name + `（${item.code}）`"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <!-- 期 -->
        <el-select
          v-model="form.period"
          clearable
          placeholder="请选择期"
          @change="getBuilding"
          size="small"
        >
          <el-option
            v-for="item in period"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <!-- 栋 -->
        <el-select
          v-model="form.building"
          clearable
          placeholder="请选择栋"
          @change="getLayer"
          size="small"
        >
          <el-option
            v-for="item in building"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="sidVisiabel">
        <!-- 层 -->
        <el-select
          v-model="form.layer"
          clearable
          placeholder="请选择楼层"
          @change="selectLayer"
          size="small"
        >
          <el-option
            v-for="item in layer"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getCommunityList } from '@/api/community/'
import { isNull } from '@/utils/tool.js'
export default {
  props: {
    cid: {
      type: [String, Number],
    },
    sidVisiabel: {
      type: Boolean,
      default: true,
    },
  },
  watch: {
    cid: {
      handler(val) {
        if (!isNull(val)) {
          this.form = {
            community: null,
            period: null,
            building: null,
            layer: null,
          }
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      community: [],
      period: [],
      building: [],
      layer: [],
      form: {
        community: null,
        period: null,
        building: null,
        layer: null,
      },
    }
  },
  created() {
    this.initCommunityList()
  },
  methods: {
    // 循环清空form
    clearForm(prop) {
      Object.keys(this.form)
        .slice(Object.keys(this.form).indexOf(prop))
        .forEach((key) => {
          this.form[key] = null
          this[key] = []
        })
    },
    initCommunityList() {
      getCommunityList().then((res) => {
        this.community = res.data
      })
    },
    // 选择社区
    getPeriod(data) {
      this.$emit('update:cid', data)
      this.clearForm('period')
      getCommunityList({ community: this.form.community }).then((res) => {
        this.period = res.data
      })
    },
    getBuilding(data) {
      this.$emit('update:pid', data)
      this.clearForm('building')
      getCommunityList({ period: this.form.period }).then((res) => {
        this.building = res.data
      })
    },
    getLayer(data) {
      this.$emit('update:bid', data)
      this.clearForm('layer')
      getCommunityList({ building: this.form.building }).then((res) => {
        this.layer = res.data
      })
    },
    selectLayer(data) {
      this.$emit('update:sid', data)
    },
  },
}
</script>

<style></style>
